<template>
	<view class="contents">
		<view class="vtabs">
			<van-tabs :active="active" @change="onChange" title-inactive-color='#000' title-active-color='#289958'
				color='#289958'>
				<van-tab title="购买记录"></van-tab>
				<van-tab title="收藏"></van-tab>
			</van-tabs>
		</view>
		<view class="" style="height: 6rpx;"></view>
		<view class="course_list" v-for="(item,index) in courseList" :key="index">

			<view class="courseitem" @click="goCourseDetail(item.id)">
				<view class="left">
					<image :src="item.image" mode=""></image>
					<view class="video">视频</view>
				</view>
				<view class="right">
					<view class="coursename">
						{{item.title}}
					</view>
					<view class="coursetype">
						<text class="tag" v-for="(i,inx) in item.label" :key="inx">{{i}}</text>
					</view>
					<view class="courseprice">
						<view class="price">
							￥{{item.money}}
						</view>
						<view class="cnumber">
							{{active == 0 ? '':'已收藏'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {myCourse,courseCollect} from '@/api/api.js'
	export default {
		data() {
			return {
				active:0,
				page:1,
				limit:15,
				courseList:[]
			}
		},
		onLoad() {
			this.myCourse()
		},
		onShow(){
			if(this.active !=0){
				this.courseCollect()
			}
		},
		methods: {
			// 课程列表
			myCourse(){
				let data = `page=${this.page}&limit=${this.limit}`;
				myCourse(data).then(res=>{
					if(res.data.code == '200'){
						this.courseList = res.data.data.list
					}
				})
			},
			onChange(e){
				this.active = e.detail.index
				if(this.active == 0){
					this.myCourse()
				}else {
					let data =`page=${this.page}&limit=${this.limit}`;
					courseCollect(data).then(res=>{
						if(res.data.code == '200'){
							this.courseList = res.data.data.list
						}
					})
				}
			},
			courseCollect(){
				let data =`page=${this.page}&limit=${this.limit}`;
				courseCollect(data).then(res=>{
					if(res.data.code == '200'){
						this.courseList = res.data.data.list
					}
				})
			},
			// 去课程详情
			goCourseDetail(id){
				uni.navigateTo({
					url:'/page_plantcourse/couresdetail/couresdetail?id='+id
				})
			}

		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);

		.course_list {
			width: 694rpx;
			// height: 250rpx;
			// background-color: #fff;
			border-radius: 10rpx;
			margin: 35rpx auto 0;
			// display: flex;

			.courseitem {
				
				display: flex;

				.left {
					width: 220rpx;
					height: 140rpx;
					flex-shrink: 0;
					position: relative;
					image {
						border-radius: 8rpx;
						width: 100%;
						height: 100%;
					}
					.video {
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						height: 36rpx;
						width: 72rpx;
						line-height: 36rpx;
						background-color: #6D6D6D;
						border-radius: 6rpx;
						position: absolute;
						bottom: 2%;
						right: 2%;
					}
				}

				.right {
					box-sizing: border-box;
					padding: 4rpx auto;
					// width: 360rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 24rpx;

					.coursetype {
						height: 36rpx;
						line-height: 36rpx;
						font-size: 24rpx;
						.tag {
							width: 160rpx;
							background-color: #D6F6EE;
							color: #14A882;
							text-align: center;
							margin: 0 10rpx 0 0;
							padding: 2rpx 5rpx;
						}
					}

					.courseprice {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.price {
							color: #ED742E;
							font-weight: 600;
						}

						.cnumber {
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
